﻿<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>公司年度计划管理</title>
    <jsp:include page="/resources/inc/head.jsp"/>
    <link href="${basePath}/resources/zheng-admin/plugins/zTree_v3/css/demo.css" rel="stylesheet"/>
    <link href="${basePath}/resources/zheng-admin/plugins/zTree_v3/css/metroStyle/metroStyle.css" rel="stylesheet"/>
</head>
<body>
<div id="main">
    <div class="search-parent">
        <div class="search-child">
            <label for="time-div">请选择考勤月份:</label>
            <div class="search custom-search" id="time-div" style="width:200px;">
                <input class="form-control date-select" id="time" type="text"
                       readonly="readonly" placeholder="请选择考勤月份">
            </div>
        </div>
        <div class="search-child">
            <label for="isAdministration-div">部门类型:</label>
            <div class="search custom-search" id="isAdministration-div" style="width:200px;">
                <div class="search custom-search" style="width: 200px;">
                    <select class="form-control" id="isAdministration">
                        <option value="true">行政部门</option>
                        <option value="false">非行政部门</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="btn btn-default" type="button" title="搜索" onclick="doSearch()">搜索</div>
        <div class="btn btn-default" type="button" title="清空" onclick="cleanSearch()">清空</div>
        <div id="toolbar">
            <shiro:hasPermission name="oa:hr:attendance:export">
                <a class="waves-effect waves-button" href="javascript:;" onclick="exportAttendance()">
                    <i class="zmdi zmdi-download"></i>导出该月考勤记录
                </a>
            </shiro:hasPermission>
            <shiro:hasPermission name="oa:hr:attendance:synchronize">
                <a class="waves-effect waves-button" href="javascript:;" onclick="synchronize()">
                    <i class="zmdi zmdi-refresh"></i>同步该月考勤记录
                </a>
                <a class="waves-effect waves-button" href="javascript:;" onclick="synchronizeCheckInData()">
                    <i class="zmdi zmdi-refresh"></i>同步该月打卡记录
                </a>
            </shiro:hasPermission>
        </div>
        <table id="table"></table>
    </div>
</div>
<jsp:include page="/resources/inc/footer.jsp"/>
<script src="${basePath}/resources/zheng-admin/js/my-ztree-common.js"></script>
<script>
    var $table = $('#table');
    var time;
    $(function () {
        // bootstrap table初始化
        $table.bootstrapTable({
            url: '${basePath}/oa/hr/attendance/list',
            height: getHeight(),
            striped: true,//隔行变色
            search: false,
            showRefresh: true,
            showColumns: true,//是否显示 内容列下拉框
            minimumCountColumns: 2,//当列数小于此值时，将隐藏内容列下拉框
            clickToSelect: true,//设置true 将在点击行时，自动选择rediobox 和 checkbox
            detailView: true,//设置为 true 可以显示详细页面模式。
            detailFormatter: 'detailFormatter',//格式化详细页面模式的视图。
            pagination: true,//设置为 true 会在表格底部显示分页条
            paginationLoop: false,//设置为 true 启用分页条无限循环的功能。
            sidePagination: 'server',
            silentSort: false,//设置为 false 将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效.
            smartDisplay: false,//True to display pagination or card view smartly.
            queryParamsType: "",
            escape: true,//转义HTML字符串，替换 &, <, >, ", `, 和 ' 字符.
            searchOnEnterKey: true,//设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
            idField: 'id',//指定主键列
            maintainSelected: true,//设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
            toolbar: '#toolbar',
            queryParams: function (params) {
                var isAdministration = $("#isAdministration").val();
                //设置为每月的1号
                if (!time) {
                    time = new Date();
                    time.setMonth(time.getMonth() - 1);
                    time.setFullYear(time.getFullYear(), time.getMonth(), 1);
                }
                params.time = getFormatDate(new Date(time));
                params.isAdministration = isAdministration;
                return params;
            },
            columns: [
                {field: 'ck', checkbox: true},
                {field: 'realname', title: '姓名', align: 'center'},
                {field: 'organizationName', title: '部门', align: 'center'},
                {field: 'supposed_days', title: '应打卡天数', align: 'center', sortable: true},
                {field: 'actual_days', title: '实际打卡天数', align: 'center', sortable: true},
                {field: 'exception_days', title: '异常打卡天数', align: 'center', sortable: true},
                {field: 'supposed_count', title: '应打卡次数', align: 'center', sortable: true},
                {field: 'actual_count', title: '实际打卡次数', align: 'center', sortable: true},
                {field: 'exception_count', title: '异常打卡次数', align: 'center', sortable: true},
                {
                    field: 'action',
                    title: '操作',
                    align: 'center',
                    formatter: 'actionFormatter',
                    events: 'actionEvents',
                    clickToSelect: false
                }
            ]
        });

        layui.use('laydate', function () {
            laydate = layui.laydate;
            var date = new Date();
            date.setMonth(date.getMonth() - 1);
            laydate.render({
                elem: "#time" //指定元素
                , theme: '#393D49'
                , type: 'month'
                , value: date
            });
        });
    });

    function actionFormatter(value, row, index) {
        return '<a href="javascript:;" onclick="openView(' + row.id + ',\'' + row.realname + '\')" data-toggle="tooltip">' +
                ' <i class="glyphicon glyphicon-file"></i> ' +
                '</a>'
    }
    function openView(id, realname) {
        var month = time.getMonth() + 1;
        var param = Common.getParam({id: id, year: time.getFullYear(), month: month});
        Common.openPage({
            title: realname + month + '月异常考勤情况',
            url: '${basePath}/oa/hr/attendance/view',
            param: param
        })
    }
    function doSearch() {
        var _time = $("#time").val();
        var isAdministration = $("#isAdministration").val();
        if (time.length < 1) {
            layer.msg('请选择考勤月份！', {icon: 5});
            return;
        }
        _time = getFormatDate(new Date(_time));
        time = new Date(_time);
        var opt = {
            url: "${basePath}/oa/hr/attendance/list",
            silent: true,
            query: {
                time: _time,
                isAdministration: isAdministration
            }
        };
        $table.bootstrapTable("refresh", opt);
    }
    function cleanSearch() {
        $table.bootstrapTable("refresh");
    }
    function exportAttendance() {
        var time = $("#time").val();
        var isAdministration = $("#isAdministration").val();
        if (time.length < 1) {
            layer.msg('请选择考勤月份！', {icon: 5});
            return;
        }
        time = getFormatDate(new Date(time));
        window.location.href = "${basePath}/oa/hr/attendance/export?time=" + time + "&isAdministration=" + isAdministration;
    }
    function getFormatDate(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        return year + "/" + month + "/" + day;
    }
    function synchronize() {

        var time = $("#time").val();
        if (time.length < 1) {
            layer.msg('请选择考勤月份！', {icon: 5});
            return;
        }
        time = getFormatDate(new Date(time));
        layer.confirm('确定同步么？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            var load = layer.load(1);
            $.ajax({
                url: "${basePath}/oa/hr/attendance/synchronize?time=" + time,
                type: "GET",
                success: function (res) {
                    if (res.code == 1) {
                        layer.msg("同步成功！", {icon: 1});
                        var isAdministration = $("#isAdministration").val();
                        var opt = {
                            url: "${basePath}/oa/hr/attendance/list",
                            silent: true,
                            query: {
                                time: time,
                                isAdministration: isAdministration
                            }
                        };
                        $table.bootstrapTable("refresh", opt);
                    } else {
                        layer.msg("同步失败！", {icon: 5});
                    }
                },
                error: function (res) {
                    layer.msg("同步失败！", {icon: 5});
                },
                complete: function () {
                    layer.close(load);
                }
            })
        }, function () {

        });

    }
    function synchronizeCheckInData() {
        var time = $("#time").val();
        if (time.length < 1) {
            layer.msg('请选择打卡月份！', {icon: 5});
            return;
        }
        time = getFormatDate(new Date(time));
        layer.confirm('确定同步么？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            var load = layer.load(1);
            $.ajax({
                url: "${basePath}/oa/hr/attendance/synchronizeCheckInData?time=" + time,
                type: "GET",
                success: function (res) {
                    if (res.code == 1) {
                        layer.msg("同步成功！", {icon: 1});
                    } else {
                        layer.msg("同步失败！", {icon: 5});
                    }
                },
                error: function (res) {
                    layer.msg("同步失败！", {icon: 5});
                }, complete: function () {
                    layer.close(load);
                }
            })
        }, function () {
        });
    }
</script>
</body>
</html>